<template>
  <view class="elec-chart">
    <view class="chart-title flex items-center">
      <image
        src="/static/images/index-elec.png"
        class="index-elec-img"
      />今日用电
    </view>
    <view class="flex items-center header-ope">
      <text class="hd-num">{{ powerToday | toFixed }}</text>
      <!-- <view class="ope-change">
        <text
          :class="['ope-item', curDay === 1 ? 'ope-item-active' : '']"
          @click="curDay = 1"
          >当日</text
        >
        <text
          :class="['ope-item', curDay === 7 ? 'ope-item-active' : '']"
          @click="curDay = 7"
          >累计</text
        >
      </view> -->
    </view>
    <view class="qiun-charts">
      <canvas canvas-id="canvasArea" id="canvasArea" class="charts"></canvas>
    </view>
  </view>
</template>

<script>
import uCharts from "@/components/u-charts/u-charts.js";
import moment from "moment";
import { mapGetters, mapState } from "vuex";
var _self;
var canvaArea = null;

const colors = ['#47D590', '#FFB350', '#40A0FF', '#FFD447', '#76819D', '#EB5405', '#00E1EB', '#244781', '#B3CFE3']
export default {
  data() {
    return {
      cWidth: "",
      cHeight: "",
      pixelRatio: 1,
      curDay: 1,
      elecTotal: 0,
      powerUsageSeria: [],
      powerUsageCategories: [],
    };
  },
  filters: {
    toFixed(val, l = 0) {
      return val.toFixed(l)
    }
  },
  computed: {
    ...mapGetters({
      project: "project",
    }),
    ...mapState({
      powerToday: state => state.project.today.power,
      powerUsage: state => state.project.powerUsage,
    }),
    isHour() {
      return this.curDay === 1;
    },
  },
  watch: {
    powerUsage: function (usageMap) {
      this.powerUsageCategories = []
      this.powerUsageSeria = [{
        data: []
      }]
      let idx = 0
      for (const key in usageMap) {
        if (idx >= colors.length) idx = 0
        if (usageMap.hasOwnProperty(key)) {
          const val = usageMap[key];
          this.powerUsageCategories.push(key)
          this.powerUsageSeria[0].data.push({
            value: val, color: '#2492FF'
          })
          idx++
        }
      }
      this.showArea({})
    }
  },
  mounted() {
    _self = this;
    this.cWidth = uni.upx2px(638);
    this.cHeight = uni.upx2px(260);
    // this.getServerData();
  },
  methods: {
    showArea(chartData, canvasId = "canvasArea") {
      canvaArea = new uCharts({
        $this: _self,
        canvasId: canvasId,
        type: "column",
        fontSize: 11,
        legend: false,
        dataLabel: false,
        dataPointShape: false,
        background: "#FFFFFF",
        pixelRatio: _self.pixelRatio,
        categories: this.powerUsageCategories,
        series: this.powerUsageSeria,
        animation: true,
        xAxis: {
          disableGrid: true,
          // type:'grid',
          // gridColor:'#CCCCCC',
          // gridType:'dash',
          // dashLength:8
        },
        yAxis: {
          disableGrid: true,
          // gridType:'dash',
          // gridColor:'#CCCCCC',
          // dashLength:8,
          // splitNumber:5,
          // min:10,
          // max:180,
        },
        width: _self.cWidth * _self.pixelRatio,
        height: _self.cHeight * _self.pixelRatio,
        extra: {
          column: {
            type: "group",
            width: 5,
          },
        },
      });
    },
    // touchArea(e) {
    // 	canvaArea.showToolTip(e, {
    // 		format: function (item, category) {
    // 			return category + ' ' + item.name + ':' + item.data
    // 		}
    // 	});
    // }
  },
};
</script>

<style lang="scss" scoped>
.elec-chart {
  margin-top: 22rpx;
  padding: 24rpx;
  background-color: #ffffff;
  box-shadow: 0px 3px 14px rgba(209, 209, 209, 0.16);
  .chart-title {
    font-size: 32rpx;
    font-weight: bold;
    .index-elec-img {
      width: 40rpx;
      height: 40rpx;
      margin-right: 16rpx;
    }
  }
  .header-ope {
    justify-content: space-between;
    line-height: 59rpx;
    margin-top: 16rpx;
    .hd-num {
      color: $uni-color-primary;
      font-size: 42rpx;
      font-weight: 800;
    }
    .ope-change {
      border-radius: 6rpx;
      line-height: 36rpx;
      font-size: 22rpx;
      font-weight: 500;
      border: 1px solid $uni-theme-color;
      .ope-item {
        display: inline-block;
        width: 74rpx;
        text-align: center;
        color: $uni-theme-color;
      }
      .ope-item-active {
        color: #ffffff;
        background-color: $uni-theme-color;
      }
    }
  }
}
/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
.qiun-charts {
  width: 638rpx;
  height: 260rpx;
  background-color: #ffffff;
}

.charts {
  width: 638rpx;
  height: 260rpx;
  background-color: #ffffff;
}
</style>
